<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="username">
    <input type="text" name="" id="age">
    <input type="button" name="" id="send" value="发布">

    <table class="table table-hover">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="list">
            <tr>
                <td>张三</td>
                <td>18</td>
                <td><button class="del">删除</button></td>
            </tr>
        </tbody>
    </table>

    <script>
        /*
            信息的 发布--删除 --表格   

            0- 获取元素  两个输入框--一个按钮-- tbody
            1- 点击发布按钮的时候，获取输入框的值--
                创建 tr -- 三个td ， 前两个td 内容 是两个输入框的值
                            第三个td 里面 存放一个 删除按钮
                            
                            
             2-删除按钮 还得添加点击事件--点击的时候删除这一行
        */
        // 0- 获取元素  两个输入框--一个按钮-- tbody
        var usernameIpt = document.querySelector('#username');
        var ageIpt = document.querySelector('#age');
        var sendBtn = document.querySelector('#send');
        var listUl = document.querySelector('#list');

        // 1- 点击发布按钮的时候
        sendBtn.onclick = function () {
            // 获取输入框的值--
            var username = usernameIpt.value;
            var age = ageIpt.value;
            // 2- 根据 输入框的值 拼接一个tr字符串
            var trStr = ` 
                <tr>
                    <td>${username}</td>
                    <td>${age}</td>
                    <td><button class="del">删除</button></td>
                </tr>`;

            // 每次都 覆盖了原来的 tbody的内容-删除按钮的事件都重新添加
            listUl.innerHTML += trStr;

            usernameIpt.value = '';
            ageIpt.value = '';
            // 3-点击事件
            var delBtnArr = document.querySelectorAll('.del');
            // 循环遍历添加点击事件
            delBtnArr.forEach(function (delBtn, i) {
                delBtn.onclick = function () {
                    // i 点击的按钮 对应的下标
                    // delBtn 和this 点击的按钮本身
                    console.log(i, delBtn, this);
                    delBtn.parentElement.parentElement.remove()
                }
            })
        }


    </script>

</body>

</html>